<template>
  <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="top: 45px;">
    <div class="mui-scroll">
      <ul class="mui-table-view mui-table-view-chevron" id="OA_task_1">
        <li v-if="!getMessageViewLastMsg"></li>
        <li class="mui-table-view-cell mui-media" v-else v-for="(item,i) in getMessageViewLastMsg" :key="i" :id="item._id">
          <div class="mui-slider-right mui-disabled">
            <a class="mui-btn mui-btn-red">删除</a>
          </div>
          <div class="mui-slider-handle">
            <div class="newm">
              <span class="mui-badge mui-badge-danger" v-if="item.unreadnum">{{item.unreadnum}}</span>
              <span class="mui-badge mui-badge-danger" v-else style="padding: 6px 6px"></span>
            </div>
            <a>
              <img class="mui-media-object mui-pull-left" src="../../assets/touxiang.jpg">
              <div class="mui-media-body">
                <span class="username">{{item.name}}</span>
                <p class='mui-ellipsis'>{{item.lastmsg.msg}}</p>
              </div>
              <div class="textflag">{{item.lastmsg.time}}</div>
              <div class="hideflag mui-icon-extra mui-icon-extra-notice"></div>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import mui from '../../lib/mui/js/mui.min.js'
  import {SET_CURRENT_CHAT_USER} from '../../store/mutation-types'
  import {mapGetters, mapMutations} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['getMessageViewLastMsg'])
    },
    mounted() {
      this.init()
    },
    methods: {
      ...mapMutations({
        setCurrentChatUser: SET_CURRENT_CHAT_USER
      }),
      init() {
        var self = this
        // mui初始化
        mui.init({
          swipeBack: false,
          // 上拉刷新设置
          pullRefresh: {
            container: '#pullrefresh',
            down: {
              // style:'circle',
              contentrefresh: '正在刷新...',
              callback: pulldownRefresh
            }
          },
          // 手势事件设置
          gestureConfig: {
            // 单击
            tap: true,
            // 长按
            longtap: true,
            // 滑动
            swipe: true
          }
        })
        // 下拉刷新函数
        function pulldownRefresh() {
          console.log('上啦')
          setTimeout(function() {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh()
            mui.toast('下拉刷新成功')
          }, 1000)
        }
//         mui滚动函数
        (function($) {
          $('.mui-scroll-wrapper').scroll()
        })(mui)
        // mui监听单击事件
        mui('ul').on('tap', '.mui-media', function (e) {
          console.log('tap')
          // console.log(e)
          // 给每一个li标签加上id属性，用于标志
          console.log(this.getAttribute('id'))
          let id = this.getAttribute('id')
          // 单击打开新的页面
          mui.openWindow({
            // 哈希路径
            url: '#/chatview'
          })
          // 使用vuex共享数据在这里调用函数
          self.setCurrentChatUser(id)
        })
        // mui监听长按事件
        mui('ul').on('longtap', '.mui-media', function(e) {
          console.log('longtap')
        });
        // 左滑显示删除
        (function($) {
          var btnArray = ['确认', '取消']
          $('#OA_task_1').on('tap', '.mui-btn-red', function(event) {
            var elem = this
            var li = elem.parentNode.parentNode
            mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
              if (e.index === 0) {
                li.parentNode.removeChild(li)
                // 这里需要使用vuex将总的数据列表里面的数据一并删除
              } else {
                setTimeout(function() {
                  $.swipeoutClose(li)
                }, 0)
              }
            })
          })
        })(mui)
      }
    }
  }
</script>

<style lang='scss' scoped>
  .newm{
    position: absolute;
    left: 30px;
    top: -5px;
    z-index: 2;
  }
  .mui-media-body{
    padding-left: 10px;
    box-sizing: border-box;
  }
  .textflag{
    position: absolute;
    right: -55px;
    top: 0;
    padding-right: 5px;
    font-size: 8px;
  }
  .hideflag{
    position: absolute;
    right: -55px;
    top: 50%;
    padding-right: 5px;
    font-size: 8px;
  }
  .mui-badge-danger, .mui-badge-red{
    background: red;
  }
  .mui-slider-handle a{
    color: black;
  }
</style>
